<template>
  <el-dialog :title="formData.id?'编辑部门':'新增部门'" :visible="show" @close="btnCancel">
    <el-form ref="addDepts" label-width="120px" :model="formData" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width:80%" placeholder="3-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="formData.manager" style="width:80%" placeholder="请选择">
          <el-option v-for="user in employeeList" :key="user.id" :label="user.username" :value="user.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24份 -->
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// 导入获取数据接口函数
import { getDepartments, addDepartments, getDeptDetail, editDeptDetail } from '@/api/departments'
import { getEmployeeSimple } from '@/api/employee'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // 接收父组件传递的nodeData
    nodeData: {
      type: Object,
      // 必须存在
      required: true
    }
  },
  data() {
    // 定义checkRepeatName 参数:规则rule,用户输入的值val,回调函数callback
    const checkRepeatName = async(rule, val, callback) => {
      // console.log(this.nodeData)
      // 获取departments数据 nodeData
      const { depts } = await getDepartments()
      // 根据数据判断返回布尔值,用链式代码
      // filter过滤出次级部门数据
      // some方法判断用户输入数据val与次级部门数据是否重名,返回true或false
      //  注意方法中不需要加{},加了就要return
      let isRepeat
      if (this.formData.id) {
        // 数据结构:父级(id,pid),子级(id,pid),其中父级id===子级pid
        // 点击编辑部门
        // 这里拿到同级数据作比较,过滤同级其他数据,所以pid相同就是同级数据,排除id相等的数据
        isRepeat = depts
          .filter(item => item.pid === this.nodeData.pid && item.id !== this.nodeData.id)
          .some(item => { return item.name === val })
        // console.log(isRepeat, this.nodeData.pid)
      } else {
        // 点击新增部门
        isRepeat = depts.filter(item => item.pid === this.nodeData.id).some(item => { return item.name === val })
      }
      // 根据布尔值执行callback
      isRepeat ? callback(new Error('同一部门下不能重名')) : callback()
    }

    // 判断输入的code是否全公司唯一
    const checkRepeatCode = async(rule, val, callback) => {
      const { depts } = await getDepartments()
      let isRepeat
      if (this.formData.id) {
        // 点击编辑部门
        isRepeat = depts.some(item => item.code === val && item.id !== this.nodeData.id)
      } else {
        // 点击新增部门
        isRepeat = depts.some(item => item.code === val)
      }
      isRepeat ? callback(new Error('编码必须唯一')) : callback()
    }
    return {
      // 定义表单数据
      formData: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      employeeList: [],
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          //  表单校验validator:自定义规则函数
          { validator: checkRepeatName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 3, max: 50, message: '部门编码要求3-50个字符', trigger: 'blur' },
          { validator: checkRepeatCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur' }
        ]
      }
    }
  },

  // 创建周期
  async  created() {
    this.employeeList = await getEmployeeSimple()
    // console.log(this.employeeList)
  },

  methods: {
    // 点击确认
    async btnOk() {
      // 校验,这里需要等校验完才执行下一步
      await this.$refs.addDepts.validate(async bool => {
        if (bool === true) {
          // 发请求
          if (this.formData.id) {
            await editDeptDetail(this.formData)
          } else {
            await addDepartments({
              ...this.formData, pid: this.nodeData.id // 需要传入参数有pid,就是顶级部门的id
            })
          }
          // 提示用户
          this.$message.success('提交成功')
          // 更新页面
          this.$emit('addDepartments')
          // 关闭弹窗,通知父组件修改show,此处vue规定写法:update:'父组件对应的变量名',修改的值,父组件绑定事件加上修饰符.sync,即可以通知父组件执行
          this.$emit('update:show', false)
        }
      })
    },

    // 关闭弹窗
    btnCancel() {
      // 通知父组件关闭弹窗
      this.$emit('update:show', false)
      // 清空表单数据
      this.$refs.addDepts.resetFields()
      // 关闭时还原数据为以下值,放在通知父组件前
      this.formData = {
        name: '',
        code: '',
        manager: null,
        introduce: ''
      }
    },

    // 获取部门详情接口函数,在点击时,树形通知父组件调用弹窗组件的函数
    async getDeptDetail(id) {
      // 因为需要在点击编辑时回显数据,所以只能在父组件调用这个函数
      this.formData = await getDeptDetail(id)
    }
  }
}
</script>

<style>

</style>
